<template>
  <div class="el-card__body">
    <el-card class="box-card">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <!-- 按钮 -->
      <div class="btn_wrapper">
        <el-button
          icon="el-icon-edit"
          @click="$router.push('new')"
          type="success"
          size="small"
        >新增试题</el-button>
      </div>
      <!-- 筛选区域 -->
      <el-form
        label-width="80px"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                @change="changeSubject"
                v-model="formData.subjectID"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in subOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                v-model="formData.catalogID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in directoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                v-model="formData.tags"
                style="width: 100%"
              >
                <el-option
                  v-for="item in tagOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                v-model="formData.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="formData.questionType">
                <el-option
                  v-for="item in questionTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                v-model="formData.difficulty"
                style="width: 100%"
              >
                <el-option
                  v-for="item in diffOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                v-model="formData.direction"
                style="width: 100%"
              >
                <el-option
                  v-for="item in directionOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                v-model="formData.creatorID"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input
                v-model="formData.remarks"
                style="width: 86%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="formData.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <!-- 城市 -->
              <el-select
                @change="searchCity"
                v-model="formData.province"
                style="width: 48%; margin-right: 2%"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <!-- 地区 -->
              <el-select
                v-model="formData.city"
                style="width: 50%"
              >
                <el-option
                  v-for="item in areaOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clear()">清除</el-button>
              <el-button
                @click="search()"
                type="primary"
              >搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据记录 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 列表 -->
      <el-table :data="questions">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
        > </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
        > </el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            {{
              questionType.find(
                (item) => item.value === +scope.row.questionType
              ).label
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="题干"
          width="280px"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="180px"
        >
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template slot-scope="scope">
            {{
              difficulty.find((item) => item.value === +scope.row.difficulty)
                .label
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="录入人"
          prop="creator"
        > </el-table-column>
        <el-table-column
          label="操作"
          width="180px"
        >
          <template slot-scope="scope">
            <el-button
              @click="showDialog(scope.row.id)"
              size="small"
              circle
              plain
              type="primary"
              icon="el-icon-view"
              title="预览"
            ></el-button>
            <el-button
              @click="$router.push(`new?id=${scope.row.id}`)"
              size="small"
              circle
              plain
              type="success"
              icon="el-icon-edit"
              title="修改"
            ></el-button>
            <el-button
              @click="del(scope.row)"
              size="small"
              circle
              plain
              type="danger"
              icon="el-icon-delete"
              title="删除"
            ></el-button>
            <el-button
              @click="addChoice(scope.row)"
              size="small"
              circle
              plain
              type="warning"
              icon="el-icon-check"
              title="加入精选"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="paper"
        :current-page="formData.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="formData.pagesize"
        layout="prev,pager, next, sizes,  jumper"
      >
      </el-pagination>
      <QpreView
        :visible.sync="isShowDialog"
        :title="cTitle"
        :isShowDialog="isShowDialog"
        @close="isShowDialog = false"
        :list="list"
      ></QpreView>
    </el-card>
  </div>
</template>

<script>
// 1.学科下有二级目录和标签
// 点击修改携带id参数，区分页面是新增还是修改--scop.row.id
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { simple as userList } from '@/api/base/users'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple as tagList } from '@/api/hmmm/tags'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys'
import {
  list as questionList,
  remove as questionDel,
  choiceAdd,
  detail
} from '@/api/hmmm/questions'
import QpreView from '../components/questions-preview'

export default {
  data () {
    return {
      companys: [],

      isLoading: false,
      isShowDialog: false,
      curCompanyId: null,
      list: {},
      id: '',
      // 查询表单中的参数
      form: {
        id: '',
        state: null,
        page: 1,
        pagesize: 20
      },
      questionInfo: {},
      questionType,
      difficulty,
      total: 0,
      // 字符串不可以，后台默认是null,
      formData: {
        subjectID: null, // 学科
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5
      },
      questions: [], // 存放基础题库列表数据
      subOptions: [], // 学科选项
      directoryOptions: [], // 二级目录
      tagOptions: [], // 标签选项
      questionTypeOptions: questionType, // 试题类型 【里面有单选多选】
      diffOptions: difficulty, // 试题难度-难度选项
      directionOptions: direction, // 方向
      userOptions: [], // 录入人 -传递数组
      cityOptions: getCity(), // 城市
      areaOptions: [] // 地区 当选择了城市的时候赋值
    }
  },
  created () {
    this.subjectListFn()
    this.users()
    this.getList()
  },
  components: {
    QpreView
  },
  computed: {
    cTitle () {
      return '题目预览'
    }
  },
  methods: {
    async showDialog (id) {
      this.isShowDialog = true
      const { data: res } = await detail({ id })
      this.list = res
    },
    // 12点击添加精选
    async addChoice (question) {
      await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        // confirmButtonText: '确定',
        // cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          await choiceAdd({ id: question.id, choiceState: 1 })
          this.$message.success('加入精选成功')
          this.getList()
        })
        .catch(() => {})
    },
    // 点击删除按钮
    del (question) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await questionDel(question)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
        .catch(() => {})
    },
    //  分页--每条页数 改变时会触发
    handleSizeChange (size) {
      this.formData.page = 1
      this.formData.pagesize = size
      this.getList()
    },
    //  当前页改变时触发
    //  传参，看当前是那个页面-重新渲染页面
    paper (nowPage) {
      this.formData.page = nowPage
      this.getList()
    },
    // 进页面调基础列表
    // 调接口（基础题库列表list）--给数据条数赋值
    async getList () {
      const { data: questionsData } = await questionList(this.formData)
      // console.log(questionsData)
      this.questions = questionsData.items
      this.total = questionsData.counts
    },
    // 点击搜索按钮
    search () {
      this.formData.page = 1
      this.getList()
    },
    // 点击清除按钮
    clear () {
      this.formData.subjectID = null
      this.formData.difficulty = null
      this.formData.questionType = null
      this.formData.tags = null
      this.formData.province = null
      this.formData.city = null
      this.formData.keyword = null
      this.formData.remarks = null
      this.formData.shortName = null
      this.formData.direction = null
      this.formData.creatorID = null
      this.formData.catalogID = null
      // for (const key in this.formData) {
      //   if (key !== 'page' && key !== 'pagesize') {
      //     this.formData[key] = ''
      //   } else {
      //     this.getList()
      //   }
      // }
      this.getList()
    },
    // 城市-根据城市选择地区--引js，清空数据，获取城市地区进行赋值
    // 1country形参，表示当前选择的城市
    searchCity (country) {
      // console.log(country)
      this.formData.city = ''
      this.areaOptions = getArea(country)
    },
    // 目录人--调接口渲染数据
    async users () {
      const { data: userArr } = await userList()
      this.userOptions = userArr
    },
    // 学科下拉change事件-影响二级目录和标签--通过subjectID学科id进行判断
    // 手动清空二级目录和标签
    // 如果有subjectID调二级目录和二级标签的接口,没有则空【】
    async changeSubject (subjectID) {
      this.formData.catalogID = ''
      this.formData.tags = ''
      if (subjectID) {
        // 目录
        const { data: directoryArr } = await directoryList({ subjectID })
        this.directoryOptions = directoryArr
        // 标签
        const { data: tagArr } = await tagList({ subjectID })
        this.tagOptions = tagArr
      } else {
        this.directoryOptions = []
        this.tagOptions = []
      }
    },
    // 学科下拉选项
    async subjectListFn () {
      const { data: subArr } = await subjectList()
      this.subOptions = subArr
    }
  }
}
</script>

<style scoped lang='scss'>
.el-card__body {
  padding: 0 10px;
  margin: 10px 0;
  span {
    font-size: 12px;
    color: pink;
  }
}

.btn_wrapper {
  margin-bottom: 15px;
  text-align: right;
}
</style>
